<template>
  <div class="authorization-overview">
    <div class="header-section">
      <div class="title">服务授权概览</div>
      <div class="tab-section">
        <div class="tab-item" :class="tabActive === 'API' ? 'active' : ''" @click="tabActiveSwitch('API')">API</div>
        <div class="tab-item" :class="tabActive === 'SDK' ? 'active' : ''" @click="tabActiveSwitch('SDK')">SDK</div>
      </div>
    </div>
    <div class="table-section my-scrollbar">
      <a-table
        v-show="tabActive === 'API'"
        :columns="APITableColumns"
        :style="{ width: '100%' }"
        :scroll="tableScroll"
        :data-source="APIDataList"
        class="header-right-angle admin-table"
        :loading="loading"
        :bordered="false"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'totalCallNum'"> {{ record.usedCallNum }}/{{ record.totalCallNum }} </template>

          <template v-if="column.dataIndex === 'beforeValidTime'"> {{ record.beforeValidTime }}~{{ record.afterValidTime }} </template>

          <template v-if="column.dataIndex === 'appStatus'">
            <div style="display: flex; align-items: center">
              <div :class="[record.appStatus === '已过期' || record.appStatus === '禁用' ? 'status' : '']"></div>
              <div>{{ record.appStatus }}</div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'operateMethodStatus'">
            <div v-if="record.operateMethodStatus === '运行中'">{{ record.operateMethodStatus }}..</div>
            <a-tooltip v-else-if="statusObj[record.operateMethodStatus].tooltip" placement="bottom">
              <template #title>
                <span>{{ record.operateMethodStatus?.substring(1) }}时间 {{ record?.operateMethodTime || '' }}</span>
              </template>
              {{ record.operateMethodStatus || '' }}
            </a-tooltip>
          </template>

          <!-- <template v-else-if="column.dataIndex == 'operateMethodStatus'">
            <a-tooltip v-if="statusObj[record.operateMethodStatus].tooltip" placement="bottom">
              <template #title>
                <span>{{ record.operateMethodStatus?.substring(1) }}时间 {{ record?.operateMethodTime || '' }}</span>
              </template>
              {{ record.operateMethodStatus || '' }}
            </a-tooltip>
            <span v-else>{{ record.operateMethodStatus || '' }}</span>
          </template> -->
        </template>
      </a-table>
      <a-table
        v-show="tabActive === 'SDK'"
        :style="{ width: '100%' }"
        :scroll="tableScroll"
        :columns="SDKTableColumns"
        :data-source="SDKDataList"
        class="header-right-angle admin-table"
        :loading="loading"
        :bordered="false"
        :pagination="false"
      >
        <!-- 表头 -->
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'authTypeName'">
            <dropdown-select v-model:value="operateMethodStatus" :options="operateMethodStatusOptions" @select="select" />
          </template>
          <template v-if="column.dataIndex === 'num'"> {{ operateMethodStatus === 1 ? '序列号' : 'LicenseID' }} </template>

          <template v-else-if="column.dataIndex === 'usedActivateNum'">
            <div v-if="operateMethodStatus === 1">已激活/可激活设备数</div>
            <div v-else-if="operateMethodStatus === 2">可激活设备数</div>
          </template>
        </template>

        <!-- 表格体 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'usedActivateNum'">
            <div v-if="record.authType === 1">{{ record.usedActivateNum }}/{{ record.totalActivateNum }}</div>
            <div v-else-if="record.authType === 2">{{ record.totalActivateNum }}</div></template
          >

          <template v-else>
            <span :title="replaceEmptyStr(record[column.dataIndex as string])">
              {{ replaceEmptyStr(record[column.dataIndex as string]) }}
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue'
  import { onUnmounted } from 'vue'

  import { filterTableColumns, replaceEmptyStr } from '@/utils'
  interface Props {
    apiData: any[]
    sdkData: any[]
    sdkCache: any[]
  }
  const props = withDefaults(defineProps<Props>(), {
    apiData: () => [],
    sdkData: () => [],
    sdkCache: () => []
  })

  const tabActive = ref<string>('API')

  const APITableColumns = ref(
    filterTableColumns([
      {
        title: 'APICode',
        dataIndex: 'apiCode',
        width: 105
      },
      {
        title: '算法服务',
        dataIndex: 'algoName',
        width: 105
      },

      {
        title: '版本号',
        dataIndex: 'version',
        width: 80
      },
      {
        title: '在线服务ID',
        dataIndex: 'onlineId',
        width: 105
      },
      {
        title: '调用量',
        dataIndex: 'totalCallNum',
        // 总/允许调用量
        width: 80
      },
      {
        title: '算法运行状态',
        dataIndex: 'operateMethodStatus',
        width: 120
      },
      {
        title: '应用服务状态',
        dataIndex: 'appStatus',
        width: 120
      },
      {
        title: 'QPS',
        dataIndex: 'qps',
        width: 80
      },
      {
        title: '有效期',
        dataIndex: 'beforeValidTime',
        width: 308
      },
      {
        title: '授权时间',
        dataIndex: 'authTime',
        width: 163
      }
    ])
  )
  const SDKTableColumns = ref(
    filterTableColumns([
      {
        title: '算法服务',
        dataIndex: 'algoName',
        width: 140
      },
      {
        title: '版本号',
        dataIndex: 'version',
        width: 80
      },
      {
        title: '平台',
        dataIndex: 'platform',
        width: 180
      },
      {
        title: '语言',
        dataIndex: 'language',
        width: 80
      },
      {
        title: '联网激活',
        dataIndex: 'authTypeName',
        width: 140
      },
      {
        title: '序列号',
        dataIndex: 'num',
        width: 200
      },
      {
        title: '已激活/可激活设备数',
        dataIndex: 'usedActivateNum',
        width: 180
        // usedActivateNum/totalActivateNum
      },
      {
        title: '授权时间',
        dataIndex: 'authTime',
        width: 192
      }
    ])
  )

  const statusObj: any = {
    待删除: {
      name: '待删除',
      value: 0,
      background: 'rgba(25, 25, 48, 0.45)',
      color: 'rgba(25, 25, 48, 0.45)',
      tooltip: true
    },
    运行中: {
      name: '运行中',
      value: 1,
      background: 'rgba(55, 150, 137, 0.08)',
      color: 'rgba(55, 150, 137, 1)',
      tooltip: false
    },
    待启用: {
      name: '待启用',
      value: 2,
      background: 'rgba(92, 201, 105, 0.08)',
      color: 'rgba(92, 201, 105, 1)',
      tooltip: true
    },
    待停用: {
      name: '待停用',
      value: 3,
      background: 'rgba(245, 151, 0, 0.08)',
      color: 'rgba(245, 151, 0, 1)',
      tooltip: true
    },
    已停用: {
      name: '已停用',
      value: 4,
      background: 'rgba(214, 24, 96, 0.08)',
      color: 'rgba(214, 24, 96, 1)',
      tooltip: false
    },
    已删除: {
      name: '已删除',
      value: 4,
      background: 'rgba(214, 24, 96, 0.08)',
      color: 'rgba(214, 24, 96, 1)',
      tooltip: false
    }
  }
  const tableScroll = computed(() => {
    let scrollX = SDKTableColumns.value.reduce((prev, curr) => {
      return prev + (curr.width as number)
    }, 0)
    scrollX = APITableColumns.value.reduce((prev, curr) => {
      return prev + (curr.width as number)
    }, 0)
    return {
      x: scrollX > 590 ? scrollX : undefined,
      y: SDKDataList.value.length >= 3 ? 190 : undefined && APIDataList.value.length >= 3 ? 190 : undefined
    }
  })
  const loading = ref(false)

  const APIDataList = ref<any>(props.apiData)
  let SDKDataList = ref<any>(props.sdkData)
  // SDK原数据缓存
  const SDKCache = ref<any>([])

  // 获取数据
  const tabActiveSwitch = (key: string): void => {
    loading.value = true
    tabActive.value = key
    APIDataList.value = props.apiData
    SDKDataList.value = props.sdkData
    operateMethodStatus.value = 1
    SDKCache.value = props.sdkCache
    SDKDataList.value = SDKCache.value?.filter((i: any) => {
      return i.authTypeName === '联网激活'
    })

    loading.value = false
  }

  // 切换时
  const operateMethodStatusOptions = [
    { label: '联网激活', value: 1 },
    { label: '离线激活', value: 2 }
  ]
  const operateMethodStatus = ref(1)
  const select = (a: any, b: any): void => {
    SDKDataList.value = SDKCache.value?.filter((i: any) => {
      return i.authTypeName === b
    })
  }
  const init = () => {
    APIDataList.value = props.apiData
    SDKDataList.value = props.sdkData
  }

  const stopWatch = watch(
    () => props.apiData,
    () => {
      init()
    }
  )
  onUnmounted(() => {
    stopWatch()
  })
</script>

<style lang="less" scoped>
  .authorization-overview {
    display: flex;
    align-items: flex-start;
    padding: 32px 0;
    width: 100%;
    background: #fff;
    border: 1px solid @border1;
    border-radius: 10px;
    flex-direction: column;
    gap: 24px;

    .header-section {
      display: flex;
      align-items: center;
      margin: 0 32px;
      gap: 32px;
      align-self: stretch;

      .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        color: @text01;
      }

      .tab-section {
        display: flex;
        align-items: flex-start;
        gap: 10px;

        .tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 4px 12px;
          width: 47px;
          height: 30px;
          color: @text02;
          border-radius: 6px;
          font-weight: 700;
          gap: 8px;
          cursor: pointer;
        }

        .active {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }

    .table-section {
      padding: 0 32px;
      width: 100%;
      height: 243px;
    }
  }

  .status {
    margin-right: 4px;
    width: 6px;
    height: 6px;
    background: @danger;
    border-radius: 50%;
  }

  :deep(.ant-table-wrapper .ant-table:not(.ant-table-bordered) .ant-table-tbody > tr:last-child > td) {
    border-bottom: none;
  }
</style>
